<template>
	<view class="order-de-t">
		<view class="order-de-t-l">
			<view class="order-de-t-l-h">
				<image src="../../static/hospital.png" mode=""></image>
				<text @tap="callPhone">
					{{hospital.name}}{{' '}}——{{' '}}{{mobile||''}}
				</text>
			</view>
			<view class="order-de-t-l-t">
				<image src="../../static/pen.png" mode=""></image>
				<text>
					工单创建于：{{createtime}}
				</text>
			</view>
		</view>
		<view class="order-de-t-r" @tap="getMore" style="width: 70rpx;text-align: center;">
			详情
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			hospital: Object,
			createtime: String,
			mobile: String
		},
		methods: {
			/* 展开详情 */
			getMore() {
				this.$parent.getMore()
			},
			/* 拨打电话 */
			callPhone() {
				wx.makePhoneCall({
					phoneNumber:this.mobile //仅为示例，并非真实的电话号码
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.order-de-t {
		padding: 52rpx 32rpx 20rpx;
		background-color: $public-oclor;
		display: flex;
		justify-content: space-between;
		align-items: center;
		z-index: 999999;

		&-l {
			&-h {
				display: flex;
				margin-bottom: 16rpx;
				align-items: center;

				font-size: 28rpx;
				font-family: PingFang SC-Semibold, PingFang SC;
				font-weight: 600;
				color: #FFFFFF;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}
			}

			&-t {
				display: flex;
				margin-bottom: 16rpx;
				align-items: center;
				color: rgba(255, 255, 255, 0.6);
				font-size: 20rpx;

				image {
					width: 32rpx;
					height: 32rpx;
					margin-right: 16rpx;
				}


			}
		}

		&-r {
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 32rpx;
			border-bottom: 4rpx solid #FFFFFF;
		}
	}

	.getmore-enter-active {
		transition: trans;
	}

	.getmore-enter {
		opacity: 0;
	}

	.getmore-leave-active {
		transition: opacity 3s;
	}

	.getmore-leave-to {
		opacity: 0;
	}

	.order-sc {
		&-b {
			background-color: #FFFFFF;
			padding: 62rpx 48rpx;

			&-c {
				position: relative;
				padding-bottom: 32rpx;

				&-p {
					&-a {
						height: 80rpx;
						background: #F6F6FB;
						font-size: 24rpx;
						font-weight: 500;
						color: #F24C17;
						line-height: 80rpx;
					}
				}

				&-t {
					display: flex;
					justify-content: space-between;
					position: relative;

					&-l {
						font-size: 24rpx;
						font-weight: 500;
						color: #303030;
					}

					&-r {
						font-size: 20rpx;
						font-weight: 400;
						color: #969699;
					}
				}

				/* &-t::before {
					content: '';
					width: 20rpx;
					height: 20rpx;
					position: absolute;
					top: 0px;
					left: -32rpx;
					border-radius: 50%;
					background-color: #C6C7CB;
				} */

				&-c {
					margin: 16rpx 0 0rpx;
					font-size: 24rpx;
					font-weight: 400;
					color: #969699;
					line-height: 36rpx;
					position: relative;

					&-p {
						color: $public-oclor;
						border-bottom: 2rpx solid $public-oclor;
					}
				}

				&-f {
					padding: 0 32rpx;

					&-t {
						font-size: 24rpx;
						font-weight: 500;
						color: $public-oclor;
						line-height: 24rpx;
						margin: 28rpx 0 26rpx;
					}

					&-i {

						&-i {
							width: 160rpx;
							height: 160rpx;
							background-color: #F5F6F8;

							image {
								width: 100%;
								height: 100%;
							}
						}
					}
				}

				/* &-c::before {
					content: '';
					width: 6rpx;
					height: 100rpx;
					position: absolute;
					top: -10rpx;
					left: -22rpx;
					background: #C6C7CB;
				} */
			}

			&-c::before {}



			&-c::after {}
		}
	}

	.order-de-mo {
		border-top: 16rpx solid #f7f8fb;
		position: relative;
		opacity: 1;
		&-s {
			position: absolute;
			top: -16rpx;
			left: 40rpx;
			border-left: 20rpx solid transparent;
			border-right: 20rpx solid transparent;
			border-top: 20rpx solid $public-oclor;
		}
	}

	.order-de {
		&-c {
			background-color: #f7f8fb;
			border-bottom: 28rpx solid #f7f8fb;

			&-m {
				font-size: 28rpx;
				font-weight: 400;
				color: #969699;
				line-height: 33rpx;
				padding: 28rpx 32rpx;

			}

			&-c {
				background-color: #FFFFFF;

				&-f {
					display: flex;
					justify-content: space-between;
					padding: 28rpx 32rpx;
					align-items: center;
					border-bottom: 2rpx solid #f7f8fb;

					&-l {
						font-size: 28rpx;
						font-weight: 500;
						color: #3B3D3D;
					}

					&-r {
						font-size: 24rpx;
						font-weight: 400;
						color: #3B3D3D;
					}
				}
			}
		}


		&-x {
			padding: 0 32rpx;

			&-c {
				&-a {
					font-size: 28rpx;
					font-weight: 500;
					color: #3B3D3D;
					margin: 20rpx 0 28rpx;
				}

				&-b {
					font-size: 24rpx;
					font-weight: 400;
					color: #3B3D3D;
					margin-bottom: 32rpx;
				}

				&-c {
					padding-bottom: 42rpx;

					&-i {
						width: 160rpx;
						height: 160rpx;
						background-color: #f5f6f8;
						margin-right: 16rpx;
						display: inline-block;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}

	.or-hi {
		width: 6rpx;
		height: 100%;
		position: absolute;
		top: 10rpx;
		left: -25rpx;
		background: #C6C7CB;
	}

	.or-hi::before {
		content: '';
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: -5rpx;
		left: -8rpx;
		border-radius: 50%;
		background-color: #C6C7CB;
	}


	.order-sc-b-c:nth-child(1) .or-hi {
		color: $public-oclor !important;
		background-color: $public-oclor !important;
	}

	.order-sc-b-c:nth-child(1) .or-hi::before {
		background-color: $public-oclor !important;
		border: 2rpx solid #fff;
	}

	.order-sc-b-c-p-c {
		background: #F6F7FB;
		margin-top: 20rpx;
		padding: 16rpx;

		.order-pri {
			display: flex;

			&-a {
				color: #969699;
				font-size: 24rpx;


			}

			&-b {
				color: #000000;
			}
		}
	}

	.order-sc-b-c-p-c>.order-pri:nth-child(2) {
		padding: 24rpx 0 38rpx;
		color: teal;
	}

	.order-sc-b-c-p-c>.order-pri>.order-pri-a:nth-child(1) {
		padding-right: 150rpx;
		position: relative;
	}

	.order-sc-b-c-p-c>.order-pri>.order-pri-a:nth-child(1)::before {
		content: '';
		width: 4rpx;
		height: 100%;
		position: absolute;
		right: 75rpx;
		background-color: rgba(0, 0, 0, 0.06);
	}

	.order-sc-b-c-p-c>.order-pri-a:nth-child(3) {
		padding: 34rpx 0 24rpx;
		border-top: 4rpx solid rgba(0, 0, 0, 0.06);
	}
</style>
